<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">机构</block>
		</cu-custom>
		<view class="cu-bar search bg-gradual-blue">
			<!-- 			<view class="cu-avatar round"
				style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big11010.jpg"></view> -->
			<view class="search-form round ">
				<text class="cuIcon-search"></text>
				<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text"
					placeholder="请输入商品名称/拼音首字母/厂家" confirm-type="search"></input>
			</view>
			<view class="action">
				<button class="cu-btn bg-gradual-blue shadow-blur round">搜索</button>
			</view>
		</view>
		<scroll-view>
			<view class="cu-list menu-avatar">
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in 4"
					:key="index" @tap="onGotoHome" @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd"
					:data-target="'move-box-' + index">
					<view class="cu-avatar round lg"
						:style="[{backgroundImage:'url(https://ossweb-img.qq.com/images/lol/web201310/skin/big2100'+ (index+2) +'.jpg)'}]">
					</view>
					<view class="content">
						<view class="text-grey">中国人民银行</view>
					</view>
					<view class="action">
						<view class="text-grey text-xs">22:20</view>
						<view class="cu-tag round bg-grey sm">5</view>
					</view>
					<view class="move">
						<view class="bg-grey">编辑</view>
						<view class="bg-red">删除</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listTouchStart: 0,
				modalName: null,
			}
		},
		methods: {
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			onGotoHome(){
				this.$Router.push({
					path: '/pages/tabbar/tabbar',
					success: (res) => {
						console.log(res)
					},
					fail: err => {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style>

</style>
